<template>
	<view>
		<view class="box-bg">
			<uni-nav-bar :fixed='true' left-icon="left" @clickLeft='handleBack' right-icon="search" title="单位管理"
				height="65px" color="#fff" backgroundColor="#00aaff" />
		</view>
		<view>
			<up-list @scrolltolower="scrolltolower">
				<up-list-item v-for="(item, index) in indexList" :key="item.id" @click="handleClickItem(item)">
					<uni-section>
						<up-cell-group :customStyle='groupStyle'>

							<view class="units-list">
								<view class="units-list-item">
									<view class="units-list-item-row">
										1
									</view>
									<view class="units-list-item-content">
										<view class="units-list-item-content-title">
											省委办公厅
										</view>
										<view class="units-list-item-content-desc">
											00001-11
										</view>
										<view class="units-list-item-content-tags">


											<view class="units-list-item-content-tags-item" v-for="(item,index) in 4"
												:key="index">
												<text>省委组织部</text>
											</view>
										</view>

										<view class="units-list-item-content-location">
											<!-- 定位图标和地址横向排列 -->
											<up-icon name="map"></up-icon>
											<text>郑州市金水区经八路街道经六路27号</text>
										</view>
									</view>
								</view>
							</view>

						</up-cell-group>
					</uni-section>
				</up-list-item>
			</up-list>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';

	const indexList = ref([]);
	const urls = [
		'https://uview-plus.jiangruyi.com/album/1.jpg',
		'https://uview-plus.jiangruyi.com/album/2.jpg',
		'https://uview-plus.jiangruyi.com/album/3.jpg',
		'https://uview-plus.jiangruyi.com/album/4.jpg',
		'https://uview-plus.jiangruyi.com/album/5.jpg',
		'https://uview-plus.jiangruyi.com/album/6.jpg',
		'https://uview-plus.jiangruyi.com/album/7.jpg',
		'https://uview-plus.jiangruyi.com/album/8.jpg',
		'https://uview-plus.jiangruyi.com/album/9.jpg',
		'https://uview-plus.jiangruyi.com/album/10.jpg',
	];
	const groupStyle = ref({
		'background-color': '#fff'
	});

	onLoad(() => {
		loadmore();
	});

	const scrolltolower = () => {
		loadmore();
	};

	const loadmore = () => {
		for (let i = 0; i < 30; i++) {
			indexList.value.push({
				url: urls[uni.$u.random(0, urls.length - 1)],
				id: i
			});
		}
	};

	function handleBack() {
		uni.navigateBack();
	}
	//  点击列表项
	function handleClickItem(item) {
		console.log(item);
		// 跳转到详情页 并传递列表id
		uni.navigateTo({
			url: '/pages/manager/units/detail/index?id=' + item.id
		})

	}
</script>

<style lang="scss" scoped>
	.units-list {
		padding: $uni-spacing-row-lg;

		&-item {
			display: flex;

			&-row {
				width: 30px;
				height: 30px;
				background-color: #00aaff;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 20px;
			}

			&-content {
				flex: 1;
				margin-left: $uni-spacing-row-lg;

				&-title {
					font-size: 15px;

					color: #333;
				}

				&-desc {
					margin-top: $uni-spacing-row-sm ;
					font-size: 13px;
					color: #999;
				}

				&-tags {
					display: flex;
					flex-wrap: wrap;
					margin-top: $uni-spacing-row-sm;
					font-size: 13px;
					color: #999;

					&-item {
						margin-bottom: $uni-spacing-row-sm;
						margin-right: $uni-spacing-row-lg;
						padding: $uni-spacing-row-sm $uni-spacing-row-lg;
						background-color: #E8EBEE;
						border-radius: 15px;
					}
				}

				&-location {
					display: flex;
					align-items: center;
					font-size: 13px;
					color: #999;
					margin-top: $uni-spacing-row-sm;
				}


			}
		}
	}
</style>